require('./couseDetail.less')
require('../../assets/fonts/iconfont.css')

// 引入文档加载事件，dom选择器封装
let { $, $$, $$$ } = require('../../utils/dom')
//引入axios
const axios = require('../../utils/axios')

$(function () {
  /**
   * 获取课程详情数据
   */
  let hash = location.hash.substring(1)
  let describeContent = $$("#describeContent")
  let more = $$("#more")
  let video = $$("#video")
  let play = $$("#play")

  axios.get('/api/train/courseDetail', {
    params: {
      id: hash
    }
  }).then(function (res) {
    if (res.data.errno === 0) {
      console.log(res.data.data);
      // 保存视频数据
      sessionStorage.setItem( 'fragments',JSON.stringify(res.data.data.fragments) );
      // 渲染视频
      video.src ="http://47.96.154.185:3701"+ res.data.data.fragments[0].videoUrl
      // 渲染标题
      $$("#titel").textContent = res.data.data.name
      // 渲染卡路里
      $$("#calorie").textContent = res.data.data.calorie
      // 渲染时间
      $$("#time").textContent = res.data.data.time
      // 渲染人数
      $$("#peoplenum").textContent = res.data.data.peoplenum
      // 渲染练习频次
      $$("#frequency").textContent = res.data.data.frequency
      // 渲染练习器械
      $$("#instrument").textContent = res.data.data.instrument
      /**
       * 点击返回后退
       */
      $$("#back").addEventListener("click",function(){
        history.back();
      })
      /**
       * 点击预览
       */
       play.addEventListener("click",function () {
        video.play()
        play.classList.remove("icon-yunhang")
      })
      /**
       * 课程描述超出部分隐藏 并渲染
       */
      let newstr = ""
      let describe = res.data.data.desc;
      if (describe.length > 38) {
        newstr = describe.substr(0, 38) + "...";
      } else {
        newstr = describe
        more.style.display = "none"
      }
      // 渲染
      describeContent.textContent = newstr
      /**
       * 点击更多显示所有
       */
      let flag = true
      more.addEventListener("click", function () {
        if (flag) {
          describeContent.textContent = describe
          // 改为静态
          more.style.position = "static"
          // 转为行级
          more.style.display = "block"
          // 靠右
          more.style.textAlign = "right"
          // 改变内容
          more.textContent = "收起"
          flag = !flag
        } else {
          // 渲染
          describeContent.textContent = newstr
          // 改变内容
          more.textContent = "更多"
          // 改为静态
          more.style.position = "absolute"
          // 转为行级
          more.style.display = "inline"
          // 靠右
          more.style.textAlign = "right"
          // 取反
          flag = !flag
        }
      })
      /**
       * 点击开始跳转
       */
      $$("#button").addEventListener("click",function () {
        location.href=`./player.html#${hash}`;
      })
    };
  })



})